<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <select-credit-goods
          clearable
          filterable
          default-first-option
          v-model="searchDamId"
          @select="name => (params.project_type_name = name)"
          @change="getData()"
          placeholder="产业包名称"
        ></select-credit-goods>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="主体名称"
          clearable
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="审批状态"
          clearable
          v-model="approvalStatus"
          @change="setParams"
          :options="{
            county_approval: '区县审批通过',
            city_approval: '市级审批通过',
            pro_approval: '省级审批通过',
          }"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="产业环节"
          clearable
          :options="[
            { value: '种繁' },
            { value: '饲料' },
            { value: '养殖' },
            { value: '屠宰' },
            { value: '加工' },
          ]"
          :props="{ value: 'value', label: 'value' }"
          @change="getData()"
          v-model="params.parent_main_business"
        ></c-select>
      </el-form-item>
      <!-- <el-form-item>
      </el-form-item>
      <el-form-item>
        <c-select placeholder="级别"
                  @change="getData()"
                  clearable
                  :options="enumCompanyLevel"
                  v-model="params['lever_type.eq']"></c-select>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:business="scope">
        <div class="text-truncate" :title="scope.row.main_business">
          {{ scope.row.main_business }}
        </div>
      </template>
      <template v-slot:recommendApproval="scope">
        <div :class="`text-center text-${scope.row.recommendApprovalColor}`">
          {{ scope.row.recommendApprovalLabel }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>
    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="数字档案卡">
          <industry-credit
            :queryId="whiteId"
            :viewMode="true"
            @success="getData(params.index)"
          ></industry-credit>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog
      :visible.sync="approvalVisble"
      :close-on-click-modal="false"
      append-to-body
      title="审批推荐表"
      top="30px"
      width="1100px"
    >
      <approval-table
        :infoData="approvalData"
        :viewMode="viewMode"
        @success="handleEditSuccess"
      ></approval-table>
    </el-dialog>

    <industry-attach
      :visible.sync="attachVisible"
      @success="getData(params.index)"
      :infoData="attachData"
    ></industry-attach>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ApprovalTable from '@/gov/views/index/task/ApprovalTable'
import { enumProjectStatus, enumCompanyLevel } from '@/gov/plugins/enum'

import SelectAddress from '@/components/select/SelectAddress'
import SelectCreditGoods from '@/gov/components/select/SelectCreditGoods'
import IndustryCredit from '@/gov/views/files/IndustryCredit'
import IndustryAttach from '@/gov/views/index/task/Attach'
export const getRecommendLabel = item => {
  const enumProStatus = {
    0: { label: '待省级审批', style: 'info' },
    1: { label: '已完成', style: 'success' },
    2: { label: '省级审批拒绝', style: 'danger' },
  }
  const enumCityStatus = {
    0: { label: '待市级审批', style: 'info' },
    1: { label: '待省级审批', style: 'success' },
    2: { label: '市级审批拒绝', style: 'danger' },
  }
  const enumCountyStatus = {
    0: { label: '待区县审批', style: 'info' },
    1: { label: '待市级审批', style: 'success' },
    2: { label: '区县审批拒绝', style: 'danger' },
  }
  let recommendApproval = {}
  if (+item.city_approval === 1) {
    recommendApproval = enumProStatus[+item.pro_approval] || {}
  } else if (+item.county_approval === 1) {
    recommendApproval = enumCityStatus[+item.city_approval] || {}
  } else {
    recommendApproval = enumCountyStatus[+item.county_approval] || {}
  }
  return recommendApproval
}
export default {
  components: {
    SelectAddress,
    SelectCreditGoods,
    IndustryCredit,
    ApprovalTable,
    IndustryAttach,
  },
  data() {
    return {
      enumCompanyLevel,
      searchDamId: '',
      params: {
        index: 1,
        size: 15,
      },
      order: {
        scale: 'desc',
      },
      tableName: 'project_white_list_view',
      tableData: [],
      tableColumns: [
        { attrs: { label: '主体名称', prop: 'customer_name', minWidth: 110 } },
        { attrs: { label: '经营地址', prop: 'address', minWidth: 150 } },
        { attrs: { label: '经营者姓名', prop: 'corp_name', align: 'center' } },
        // { attrs: { label: '身份证号码', prop: 'id_card' } },
        { attrs: { label: '产业环节', prop: 'parent_main_business', align: 'center' } },
        { attrs: { label: '主营业务', prop: 'main_business' }, slot: 'business' },
        { attrs: { label: '产业规模(万羽、万吨)', prop: 'scale', align: 'center' } },
        { attrs: { label: '经营年限', prop: 'bussiness_years', align: 'center' } },

        { attrs: { label: '所属产业包', prop: 'project_type_name' } },
        { attrs: { label: '推荐部门', prop: 'submit_person_name' } },
        // { attrs: { label: '申请表状态', align: 'center' }, slot: 'recommend' },
        { attrs: { label: '审批状态', align: 'center' }, slot: 'recommendApproval' },
        // { attrs: { label: '担保受理次数', prop: 'claim_num_db', align: 'center' } },
        { attrs: { label: '银行受理次数', prop: 'claim_num_bank', align: 'center' } },
        {
          attrs: { label: '操作', minWidth: 100 },
          operations: [
            {
              content: '审批推荐',
              icon: 'fa fa-edit',
              event: this.handleEdit,
              attrs: { class: 'py-1 px-1 mx-1' },
              ifRender: row => this.editable(row),
            },
            {
              content: '审批表',
              icon: 'fa fa-search',
              attrs: { class: 'py-1 px-1 mx-1' },
              event: this.handleView,
            },
            {
              content: '档案卡',
              icon: 'fa fa-file-text',
              attrs: { class: 'py-1 px-1 mx-1' },
              event: this.handleCredit,
            },
            {
              content: '附件',
              icon: 'fa fa-clipboard',
              attrs: { class: 'py-1 px-1 mx-1' },
              event: this.handleAttach,
            },
          ],
        },
      ],
      tableCount: 0,
      reportVisible: false,
      whiteId: '',
      loading: false,
      viewMode: false,
      infoData: {},
      approvalVisble: false,
      approvalData: {},
      attachVisible: false,
      attachData: {},
      approvalStatus: '',
    }
  },
  computed: {
    ...mapGetters(['user']),
    queryAddress() {
      return this.user.queryAddressCode
    },
    level() {
      return +this.user.orgRegionLever
    },
  },
  created() {
    this.params.address_code = this.queryAddress
    this.getData()
  },
  methods: {
    setParams(key) {
      this.params['county_approval.eq'] = ''
      this.params['city_approval.eq'] = ''
      this.params['pro_approval.eq'] = ''
      if (key) {
        this.params[`${key}.eq`] = 1
      }
      this.getData()
    },
    editable(row) {
      if (this.level === 3 && +row.county_approval < 1) {
        return true
      }
      if (this.level === 2 && +row.city_approval < 1 && +row.county_approval === 1) {
        return true
      }
      if (this.level === 1 && +row.pro_approval < 1 && +row.city_approval === 1) {
        return true
      }
      return false
    },
    handleEditSuccess() {
      this.approvalVisble = false
      this.getData()
    },
    handleEdit(row) {
      if (+row.project_status === 0) {
        return this.$message.warning('请先完成建档')
      }
      this.viewMode = false
      this.approvalData = { ...row }
      this.approvalVisble = true
    },
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order || {})
      )
    },
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res = {}] = await this.fetchData(this.params)
      const data = res.data || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
      this.loading = false
    },
    dataAdapter(item) {
      item.projectStatusLabel = enumProjectStatus[item.project_status]
      const recommendApprovalLabel = getRecommendLabel(item)
      item.recommendApprovalLabel = recommendApprovalLabel.label
      item.recommendApprovalColor = recommendApprovalLabel.style
      return item
    },
    handleAttach(row) {
      this.attachVisible = true
      this.attachData = { ...row }
    },
    handleCredit(row) {
      this.whiteId = row ? row.project_white_list_id : ''
      this.reportVisible = true
    },
    handleView(row) {
      this.viewMode = true
      this.approvalData = { ...row }
      this.approvalVisble = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
